
*{
    margin:0;
    padding:0;
}
ul{
    list-style: none;
}
.none{
    display: none;
}
.caret:after{
    content: "";
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    border-width: 6px;
    border-style: solid;
}
.caret1:after{
    border-top-color: black;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
}
.caret2:after{
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-left-color: black;
    border-right-color: transparent;
}
.menu-wrapper{
    display: flex;
    justify-content: center;
    font-size: 0;
}
.menu-wrapper > li{
    position: relative;
    display: inline-block;
    font-size: 16px;
    line-height: 40px;
    width: 100px;
    cursor: pointer;
}
.menu-wrapper > li:not(:first-child):before{
    content: "";
    position: absolute;
    left: 10px;
    top: 12px;
    width: 0;
    height: 16px;
    display: inline-block;
    border-left: 1px solid black;
}
.menu-wrapper > li > a{
    display: block;
    text-align: center;
    padding-left: 21px;
}
.menu-wrapper li.caret{
    position: relative;
}
.menu-wrapper > li.caret:after{
    right: -6px;
    top: 17px;
}
.sub-menu-1{
    position: absolute;
    top: 40px;
    left: 21px;
    border: 1px solid black;
}
.sub-menu-2{
    position: absolute;
    top: 10px;
    left: 101px;
    border: 1px solid black;
}
.sub-menu-1 > li,.sub-menu-2 > li{
    line-height: 30px;
    width:100px;
    text-indent: 1em;
    cursor: pointer;
}
.sub-menu-1 > li:hover,.sub-menu-2 > li:hover{
    text-decoration: underline;
}
.sub-menu-1 > li.caret:after,.sub-menu-2 > li.caret:after{
    right: 0;
    top: 9px;
}